/*
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-03-18 16:52:35
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-03-19 18:36:57
 * @FilePath: \react-demo\src\page\Layout\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import dayjs from 'dayjs';
import classNames from 'classnames';
import { useState, useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Button, DatePicker, Input, NavBar, Toast } from 'antd-mobile';
import Icon from '@/components/Icon';
import { billListData } from '@/contants';
import { addBillList } from '@/store/modules/billStore';
import { useDate } from '@/hooks/useDate';

import './index.scss';


const New = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const { visible, dateText, onShowDate, onHideDate, onDateChange } = useDate();

  // 1. 区分账单状态
  const [money, setMoney] = useState(0);
  const [billType, setBillType] = useState('pay');
  const [selectedBillType, setSelectedBillType] = useState('');

  // 保存账单
  const saveBill = useCallback(
    async () => {
      // 收集表单数据
      const data = {
        type: billType,
        money: billType === 'pay' ? 0 - money : +money,
        date:
          dateText === '今天'
            ? dayjs()
            : dayjs(`${dateText} ${dayjs().format('HH:mm:ss')}`),
        useFor: selectedBillType
      };
      await dispatch(addBillList(data));
      Toast.show({
        icon: 'success',
        content: '保存成功',
      });
      navigate('/');
    },
    [billType, money, dateText, selectedBillType, dispatch, navigate]
  );


  return (
    <div className="keepAccounts">
      <NavBar className="nav" onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(billType === 'pay' ? 'selected' : '')}
            onClick={() => setBillType('pay')}
          >
            支出
          </Button>
          <Button
            shape="rounded"
            className={classNames(billType === 'income' ? 'selected' : '')}
            onClick={() => setBillType('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date" onClick={onShowDate}>
              <Icon type="calendar" className="icon" />
              <span className="text">{dateText}</span>
              <DatePicker
                className="kaDate"
                title="记账日期"
                visible={visible}
                onClose={onHideDate}
                max={new Date()}
                onConfirm={onDateChange}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={money}
                onChange={setMoney}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {
          billListData[billType].map(item => {
            return (
              <div className="kaType" key={item.type}>
                <div className="title">{item.name}</div>
                <div className="list">
                  {
                    item.list.map(item => {
                      return (
                        <div
                          className={classNames(
                            'item',
                            selectedBillType === item.type ? 'selected' : ''
                          )}
                          key={item.type}
                          onClick={() => setSelectedBillType(item.type)}
                        >
                          <div className="icon">
                            <Icon type={item.type} />
                          </div>
                          <div className="text">{item.name}</div>
                        </div>
                      )
                    })
                  }
                </div>
              </div>
            )
          })
        }
      </div>

      <div className="btns">
        <Button className="btn save" onClick={saveBill}>
          保 存
        </Button>
      </div>
    </div>
  );
}

export default New;